@charset "utf-8";
*{
	margin: 0;
	padding: 0;
}
body,html{
	width: 100%;
	height: 100%;
	background: #000000;
	perspective: 2800px;
	perspective-origin: bottom;
	font-family: "楷体";
}
#box{
	transform-style: preserve-3d;	
	perspective-origin: center -20px;	
	margin: 100px auto;
	width: 700px;
	height:438px;
	position: relative;	
}
#box div.markL{
	width: 349px;
	height:438px;
	border-right: 1px grey solid;
	background: url(../img/img/11fbfb0cff3ae879d41098c37c9e450eeab015b3.jpg) no-repeat 0 -2px;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.7;
	z-index: 10;	
	background-size: 200% 100%;
}
#box div.markR{			
	width: 349px;
	height:438px;
	background: url(../img/img/11fbfb0cff3ae879d41098c37c9e450eeab015b3.jpg) no-repeat -350px -2px;
	background-size: 200% 100%;
	background-color:#000;
	position: absolute;
	left: 350px;	
	transform: rotateY(-179deg);
	transform-origin: 0% 50%;	
}
#box div.markR a.btn{
	width: 50px;
	height: 50px;
	display: inline-block;
	background: url(../img/u=3203766304,2566093071&fm=21&gp=0.jpg) no-repeat -245px -38px;
	border: 1px #fff solid;
	border-radius: 8px;
	position: absolute;
	bottom: 2%;
	left: 50%;
	margin-left: -25px;
	transform:translateZ(1px) rotateY(180deg);
	opacity: 0.7;
	z-index: 5;
}
#box div.markR img{
	position: absolute;
	top: 0;
	left: 0;
	transition: all 1s linear;
}
#log{
	height: 100px;
	width: 100px;
	overflow: hidden;
	border-radius: 50%;
	position: absolute;
	bottom: 10%;
	right: 10%;
	display: none;
	background:url(../img/img/20160501153438_WxU2B.thumb.700_0.jpeg) no-repeat;
	background-size: 200% 100%;
	animation: logo 8s linear infinite;
}
@keyframes logo{
	from{transform: rotate(360deg);}
	to{transform: rotate(0deg);}
}
@-webkit-keyframes logo{
	from{transform: rotate(360deg);}
	to{transform: rotate(0deg);}
}
@-moz-keyframes logo{
	from{transform: rotate(360deg);}
	to{transform: rotate(0deg);}
}
@-ms-keyframes logo{
	from{transform: rotate(360deg);}
	to{transform: rotate(0deg);}
}
div.close{
	animation: close 1s linear both;
}
div.opened{
	animation: opened 1s linear both;
}
@keyframes close{
	0%{
		transform: rotateY(0deg);
		transform-origin: 0% 50%;
		opacity: 0.7;	
	}
100%{
		transform: rotateY(-179deg);
		transform-origin: 0% 50%;
		opacity: 1;	
	}
}
@-webkit-keyframes close{
	0%{
		transform: rotateY(0deg);
		transform-origin: 0% 50%;
		opacity: 0.7;	
	}
100%{
		transform: rotateY(-179deg);
		transform-origin: 0% 50%;
		opacity: 1;	
	}
}
@-moz-keyframes close{
	0%{
		transform: rotateY(0deg);
		transform-origin: 0% 50%;
		opacity: 0.7;	
	}
100%{
		transform: rotateY(-179deg);
		transform-origin: 0% 50%;
		opacity: 1;	
	}
}
@-ms-keyframes close{
	0%{
		transform: rotateY(0deg);
		transform-origin: 0% 50%;
		opacity: 0.7;	
	}
100%{
		transform: rotateY(-179deg);
		transform-origin: 0% 50%;
		opacity: 1;	
	}
}
@keyframes opened{
	from{
		transform: rotateY(-179deg);
		transform-origin: 0% 50%;
		opacity: 1;	
	}
	to{
		transform: rotateY(0deg);
		transform-origin: 0% 50%;
		opacity: 0.7;	
	}
}
@-moz-keyframes opened{
	from{
		transform: rotateY(-179deg);
		transform-origin: 0% 50%;
		opacity: 1;	
	}
	to{
		transform: rotateY(0deg);
		transform-origin: 0% 50%;
		opacity: 0.7;	
	}
}
@-ms-keyframes opened{
	from{
		transform: rotateY(-179deg);
		transform-origin: 0% 50%;
		opacity: 1;	
	}
	to{
		transform: rotateY(0deg);
		transform-origin: 0% 50%;
		opacity: 0.7;	
	}
}
@-webkit-keyframes opened{
	from{
		transform: rotateY(-179deg);
		transform-origin: 0% 50%;
		opacity: 1;	
	}
	to{
		transform: rotateY(0deg);
		transform-origin: 0% 50%;
		opacity: 0.7;	
	}
}
#lrc{
	width: 70%;
	height: 60%;
	overflow: hidden;
	position: absolute;
	top: 10%;
	left: 15%;
	text-align: center;
	color: #fff;
}
#lrc2{
	position: absolute;
	top: 131px;
	width: 100%;
	height: 120%;
}
#lrc p{
	height: 20%;
	line-height: 52px;
}
#btn{
	width: 70%;
	position: absolute;
	bottom: 2%;
	left: 15%;
	height: 50px;
	text-align: center;
	line-height: 50px;
}
#btn a.btn{
	width: 50px;
	height: 50px;
	display: inline-block;
	background: url(../img/u=3203766304,2566093071&fm=21&gp=0.jpg) no-repeat;
	border: 1px #fff solid;
	border-radius: 8px;
}
#btn a.btn:nth-child(1){
	background-position: -564px -131px;
}
#btn a.btn:nth-child(2){
	background-position: -245px -38px;
	margin: 0 10px;
}
#btn a.btn:nth-child(3){
	background-position: -458px -38px;
}
#scroll{
	width: 70%;
	height: 2px;
	background: #fff;
	position: absolute;
	bottom: 20%;
	left: 15%;
}
#drag{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	top: -4px;
	z-index: 5;
}
#pro{
	background: greenyellow;
	z-index: 1;
	height: 2px;
}
textarea{
	display: none;
}
#audio{
	display: none;
}
#volume{
	width: 2px;
	height: 50px;
	background: #fff;
	position: absolute;
	left: 10%;
	bottom: 10%;
	display:none;
}
#dot{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ccc;
	position: absolute;
	left: -4px;
	top: 40px;
	cursor: pointer;
}
#vol{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	position: absolute;
	left: 7%;
	bottom: 3%;
	background-image:url(../img/img/vol.png);
	background-repeat:no-repeat ;
	background-size: 100% 100%;
	background-position: center center;
	cursor: pointer;
	display: none;
}